<template>
  <layout-content>
    <div class="mui-content">
      <div class="mine-header flex-between-center" @click="go('setting')">
        <div class="mine-header-box display-flex">
          <img v-if="userInfo.photo && userInfo.photo.length>0" :src="fn.getImgUrl(userInfo.photo)" alt="">
          <img v-if="!userInfo.photo || userInfo.photo.length<1" src="../../../static/images/default.jpg" alt="">
          <div class="mine-header-info flex-column flex-justify-center">
            <h3>{{userInfo.fullname}} <span>入党时间：{{formateDate(userInfo.partyMemberModel.joinPartyDate)}}</span></h3>
            <p>{{userInfo.partyMemberModel.partyGroupName}}</p>
          </div>
        </div>
        <span class="mui-icon mui-icon mui-icon-arrowright"></span>
      </div>
      <ul class="mui-table-view mine-lists">
        <li @click="payInfo" class="mui-table-view-cell display-flex">
          <img class="mine-lists-img" src="../../../static/images/user_icon_dfjn.png" alt="">
          <div class="mine-lists-content">
            <div class="flex-between-center">
              <p class="mine-lists-title">党费缴纳信息</p>
              <div class="flex-center">
                <span v-if="data.remainShouldPay > 0" class="mine-lists-money">本月剩余应缴党费￥{{data.remainShouldPay}}</span>
                <span class="mui-icon mui-icon-arrowright"></span>
              </div>
            </div>
            <p v-if="data.needPayCount>0" class="mine-lists-tips">你有{{data.needPayCount}}次党费待补缴</p>
          </div>
        </li>
        <li class="display-flex" @click="goExamination('2')">
          <img class="mine-lists-img" src="../../../static/images/user_icon_myjifen.png" alt="我的积分">
          <div class="mine-lists-content">
            <div class="flex-between-center">
              <p class="mine-lists-title">我的积分</p>
              <div class="flex-center">
                <span class="mine-lists-money">{{personRank.TOTAL_SCORE_}}分</span>
                <span class="mui-icon mui-icon-arrowright"></span>
              </div>
            </div>
          </div>
        </li>
        <li class="display-flex" @click="goExamination('1')">
          <img class="mine-lists-img" src="../../../static/images/user_icon_jifen.png" alt="支部党建积分">
          <div class="mine-lists-content">
            <div class="flex-between-center">
              <p class="mine-lists-title">支部党建积分</p>
              <div class="flex-center">
                <span class="mine-lists-money">{{branchRank.TOTAL_SCORE_}}分</span>
                <span class="mui-icon mui-icon-arrowright"></span>
              </div>
            </div>
          </div>
        </li>
        <li @click="goSafe" class="display-flex">
          <div class="mine-lists-content flex-justify-start">
            <img class="mine-lists-img" src="../../../static/images/user_icon_mima.png" alt="账户与安全">
            <p class="mine-lists-title">账户与安全</p>
            <span class="mui-icon mui-icon-arrowright"></span>
          </div>
        </li>
        <ul class="mui-table-view">
          <li @click="loginOut()" class="mui-table-view-cell" style="text-align: center;">
            <a style="color: #f34d4a;">退出当前账户</a>
          </li>
        </ul>
      </ul>
    </div>
  </layout-content>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        api: api,
        refresh: new Date().getTime(),
        isFocus: false,
        userInfo: this.$store.state.userInfo,
        data: {},
        personRank: {},
        branchRank: {}
      }
    },
    created () {
      this.loadData()
      this.getOwnYearOrOwnGourp()
    },
    computed: {
    },
    methods: {
      formateDate (str) {
        return moment(str).format('YYYY-MM-DD')
      },
      go (name) {
        this.$router.push({'name': name})
      },
      goSafe () {
        this.go('safe')
      },
      goMine () {
        this.go('mine')
      },
      loginOut () {
        let me = this
        this.$createDialog({
          type: 'confirm',
          icon: '',
          title: '温馨提示',
          content: '确定退出当前账户？',
          confirmBtn: {
            text: '确定退出',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消退出',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            me.doLoginOut()
          },
          onCancel: () => {
          }
        }).show()
      },
      doLoginOut () {
        this.$localStorage.remove('userInfo')
        delete this.$store.state.userInfo
        this.$router.replace({'name': 'login'})
      },
      payInfo () {
        this.go('payInfo')
      },
      loadData () {
        let _time = new Date(new Date().getFullYear(), 1, 1)
        let yearMonth = moment(_time).format('YYYY-MM')
        let data = {
          partyMemberId: this.userInfo.partyMemberModel.id,
          yearMonth: yearMonth
        }
        loginService.getChargeEndTime(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip('获取数据失败')
          }
          this.data = res.data
        })
      },
      goExamination (type) {
        this.$store.state.rankType = type
        if (type === '1') {
          this.branchRank.titleName = '支部积分'
          this.$store.state.buildAssessData = this.branchRank
        } else {
          this.personRank.titleName = '我的积分'
          this.$store.state.buildAssessData = this.personRank
        }
        this.$router.push({name: 'zbIntegral'})
      },
      // 个人排名
      getOwnYearOrOwnGourp () {
        // 考核对象:'1'支部考核，'2'个人考核 ,
        let personParam = {
          checkObject: '2',
          token: tools.getToken(),
          year: moment().format('YYYY')
        }
        loginService.getOwnYearOrOwnGourp(personParam).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.personRank = res.data
          }
        })
        let branchParam = {
          checkObject: '1',
          token: tools.getToken(),
          year: moment().format('YYYY')
        }
        loginService.getOwnYearOrOwnGourp(branchParam).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.branchRank = res.data
          }
        })
      }
    }
  }
</script>

<style scoped lang="">

</style>
